import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {
  MatCell,
  MatCellDef,
  MatColumnDef,
  MatHeaderCell,
  MatHeaderCellDef,
  MatHeaderRow,
  MatHeaderRowDef,
  MatRow,
  MatRowDef,
  MatTable,
  MatTableDataSource,
} from "@angular/material/table";
import {BackupService} from "../../services/backup.service";
import {DBBackup} from "../../models/backup";
import {MatSnackBar} from "@angular/material/snack-bar";
import {MatPaginator} from "@angular/material/paginator";
import {MatSort, MatSortHeader} from "@angular/material/sort";
import {MatButton, MatIconButton} from "@angular/material/button";
import {MatFormField, MatFormFieldModule, MatLabel} from "@angular/material/form-field";
import {MatInput} from "@angular/material/input";
import {MatIcon} from "@angular/material/icon";
import {
  MatDatepickerModule,
  MatDatepickerToggle,
  MatDateRangeInput,
  MatDateRangePicker
} from "@angular/material/datepicker";
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'app-backup',
  standalone: true,
  imports: [
    MatTable,
    MatColumnDef,
    MatHeaderCell,
    MatHeaderCellDef,
    MatCell,
    MatCellDef,
    MatHeaderRow,
    MatRow,
    MatHeaderRowDef,
    MatRowDef,
    MatPaginator,
    MatButton,
    MatFormField,
    MatInput,
    MatLabel,
    MatSortHeader,
    MatIcon,
    MatIconButton,
    MatSort,
    MatDateRangeInput,
    MatDatepickerToggle,
    MatDateRangePicker,
    ReactiveFormsModule,
    FormsModule,
    MatDatepickerModule,
    MatFormFieldModule,
  ],
  templateUrl: './backup.component.html',
  styleUrl: './backup.component.scss'
})
export class BackupComponent implements OnInit, AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  dataSource: MatTableDataSource<DBBackup>;
  displayedColumns = ['day', 'address', 'port', 'bak_type', 'bak_file', 'bak_size', 'start_time', 'end_time', 'status', 'create_at'];
  currentDate = `${new Date().getUTCFullYear()}-${(new Date().getMonth() + 1).toString().padStart(2, '0')}-${new Date().getDate().toString().padStart(2, '0')}`;
  backupFG = new FormGroup({
    start: new FormControl<Date>(new Date()),
    end: new FormControl<Date>(new Date()),
  });

  constructor(private backupService: BackupService,
              private _snackBar: MatSnackBar) {
    this.dataSource = new MatTableDataSource<DBBackup>();
  }

  ngOnInit(): void {
    this.listDBBackup(this.currentDate, this.currentDate);
  }

  filterDate(start?: Date | null, end?: Date | null) {
    let start_date = this.currentDate;
    let end_date = this.currentDate;
    if (start) {
      start_date = `${start.getUTCFullYear()}-${(start.getUTCMonth() + 1).toString().padStart(2, '0')}-${(start.getDate()).toString().padStart(2, '0')}`
    }
    if (end) {
      end_date = `${end.getUTCFullYear()}-${(end.getUTCMonth() + 1).toString().padStart(2, '0')}-${(end.getDate()).toString().padStart(2, '0')}`
    }
    this.listDBBackup(start_date, end_date);
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  deleteInstance(start: Date, end: Date) {
    this.backupService.deleteDBBackup({start_date: start, end_date: end}).subscribe(result => {
      this.listDBBackup(this.currentDate, this.currentDate);
      this.openSnackBar(result, 'Success');
    })
  }

  listDBBackup(start: string, end: string) {
    this.backupService.listDBBackup(start, end).subscribe(v => {
      this.dataSource.data = v;
    });
  }

  openSnackBar(message: string, action: string) {
    this._snackBar.open(message, action, {
      horizontalPosition: 'right',
      verticalPosition: 'top',
      duration: 3 * 1000
    });
  }

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}
